<template>
  <div class="dv">
    <div class="header">
      <div class="top">
        <span class="left1"></span>
        <b class="center1">新型冠状肺炎实时监测</b>
        <span class="right1">当前时间:{{ nowtime }}</span>
      </div>
    </div>
    <!-- 子 -->
    <div class="left">
      <div class="chiden">
        <myleft style="flex: 1"></myleft>
        <mycenter style="flex: 1"></mycenter>
        <myfooter style="flex: 1"></myfooter>
      </div>
      <div class="center">
        <center></center>
      </div>
      <div class="right">
        <mytop style="flex: 1"></mytop>
        <mybetween style="flex: 1"></mybetween>
        <myunder style="flex: 1"></myunder>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { onUnmounted,onMounted } from "vue";
import { useStore } from "vuex";
import {getForeinData} from "../../charts"
import { useRouter, useRoute } from "vue-router";
import Myleft from "../components/Myleft.vue";
import Mycenter from "../components/Mycenter.vue";
import Myfooter from "../components/Myfooter.vue";
import mytop from "../components/mytop.vue"
import mybetween from "../components/mybetween.vue"
import myunder from "../components/myunder.vue"
import center from "../components/center.vue"

const nowtime = ref("");
// 获取当前时间   年月日时分秒
const getTime = () => {
  const date = new Date();
  return `${date.getFullYear()}-${
    date.getMonth() + 1
  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};
const date = setInterval(() => {
  nowtime.value = getTime();
}, 1000);
onUnmounted(() => {
  date;
  
});
onMounted(()=>{
  getForeinData()
})
</script>

<style lang="scss">
.dv {
  background: url("../../public/img/bg.a6333996.jpg");
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.header {
  background: url("../../public/img/head_bg.eeff3da5.png");
  height: 85px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.top {
  display: flex;
  justify-content: space-around;
  color: #fff;
  line-height: 85px;
  .center1 {
    font-weight: 700;
  }
}
.chiden {
   width: 520px;
  display: flex;
  flex-direction: column;
 
}
.left{
  width: 100vw;
  display: flex;
  color: #fff;
  justify-content: space-between;
}
.center{
  width: 830px;
}
.right {
  width: 520px;
  display: flex;
  flex-direction: column;
}
.center1{
  font-weight: 700;
  font-size: 30px;
}
.right1{
    font-size: 20px;
}
</style>
